<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import {formatNum} from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option: {
        grid: {
          left: '10%',
          right: '14%',
          top : '20%',
          bottom: '0%',
          containLabel: true
        },
        tooltip : {
          show : true,
          trigger: 'axis',
          showContent : true,
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['始发站','终到站'],
          textStyle: {
            color: '#aaaeb0'
          },
          orient: 'vertical',
          left: 10,
          top: 5
        },
        xAxis: {
          type: 'category',
          data: ['徐州', '蚌埠', '合肥', '南京', '上海', '杭州'],
          nameTextStyle: {
            color: '#fff',
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize : '12'
            },
          },
          axisLine : {
            show : true,
            lineStyle : {
                width: 2,
                color : '#fff'
            },
          },
          axisTick : {
            show:false,
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：万人',
          nameTextStyle : {
            color : '#aaaeb0',
            fontSize : 12,
            padding : [30,0,-32,30]
          },
          axisLine : {
            show : false,
          },
          splitLine : {
            show : false,
          },
          axisLabel: {
            show: false,
          },
          axisTick : {
            show:false,
          },
          splitLine : {
            show : false,
          }
        },
        series: [
          {
            name: '始发站',
            type: 'bar',
            data: [44300,55400,65300,73200,89500,68000],
            color: '#44bfff',
            barWidth: '14',
            barGap: '0',
            label:{
              normal: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter : function(value){
                  return (value.data / 10000).toFixed(2);
                }
              }
            }
          },
          {
            name: '终到站',
            type: 'bar',
            data: [68300,71200,83100,91200,108300,127600],
            color: '#7373ff',
            barWidth: '14',
            label:{
              normal: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter : function(value){
                  return (value.data / 10000).toFixed(2);
                }
              }
            }
          }
        ]
      }
    }
  },
  watch : {
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 360 / 436 * 100%;
  }
</style>
